@import "../../style/base/function";

.container{
    background-image: url('../../static/bg.jpeg');
    background-repeat:no-repeat;
    background-size: cover;
    height: 100%;
}
.p-info{
    margin-top: 15px;
    font-size: 0.5rem;
    background-color: transparent;
    color: #E9952F;
}
.bth-right{
    position: absolute;
    right: 0;
    top: 15%;
}
.right-menu{
    margin-top: 20px;
}
.right-menu p{
    color: #ff976a;
}
.bowl {
    width: 60%;
    margin: pxToRem(0px) auto;
    position: relative;

    .bg_img {
        margin-top: pxToRem(350px);
        width: 100%;
    }

    .redpacket {
        top: 15%;
        left: 20%;
        width: 12%;
        position: absolute;
        animation-duration: 1.5s;
        animation-fill-mode: both;
        animation-direction: alternate;
    }

    #r1 {
        animation-name: dice1;
    }

    #r2 {
        animation-name: dice2;
    }

    #r3 {
        animation-name: dice3;
    }

    #r4 {
        animation-name: dice4;
    }

    #r5 {
        animation-name: dice5;
    }

    #r6 {
        animation-name: dice6;
    }
}

.btn-start {
    width: 50%;
    font-size: 0.6rem;
}

select {
    display: block;
    border: 1px solid #ddd;
    margin: pxToRem(20px) auto;
}
.btn-reset{
    margin-left: 10px;
}
@keyframes dice1 {
    0% {
        top: 54%;
        left: 20%;
    }

    5% {
        top: 55%;
        left: 28%;
        transform: rotate(180deg);
    }

    10% {
        top: 56%;
        left: 36%;
        transform: rotate(360deg);
    }

    15% {
        top: 57%;
        left: 44%;
        transform: rotate(540deg);
    }

    20% {
        top: 58%;
        left: 53%;
        transform: rotate(720deg);
    }

    25% {
        top: 60%;
        left: 57%;
        transform: rotate(900deg);
    }

    30% {
        top: 62%;
        left: 64%;
        transform: rotate(1080deg);
    }

    35% {
        top: 64%;
        left: 62%;
        transform: rotate(1260deg);
    }

    40% {
        top: 66%;
        left: 61%;
        transform: rotate(1440deg);
    }

    45% {
        top: 68%;
        left: 59%;
        transform: rotate(1620deg);
    }

    50% {
        top: 66%;
        left: 56%;
        transform: rotate(3600deg);
    }

    55% {
        top: 64%;
        left: 51%;
        transform: rotate(1980deg);
    }

    60% {
        top: 62%;
        left: 45%;
        transform: rotate(2160deg);
    }

    65% {
        top: 61%;
        left: 40%;
        transform: rotate(2340deg);
    }

    70% {
        top: 62%;
        left: 35%;
        transform: rotate(2520deg);
    }

    75% {
        top: 63%;
        left: 28%;
        transform: rotate(5400deg);
    }

    80% {
        top: 64%;
        left: 22%;
        transform: rotate(2880deg);
    }

    85% {
        top: 65%;
        left: 26%;
        transform: rotate(3060deg);
    }

    90% {
        top: 66%;
        left: 30%;
        transform: rotate(3240deg);
    }

    95% {
        top: 67%;
        left: 37%;
        transform: rotate(1620deg);
    }

    100% {
        top: 68%;
        left: 44%;
    }
}

@keyframes dice2 {
    0% {
        top: 56%;
        left: 20%;
    }

    5% {
        top: 57%;
        left: 20%;
        transform: rotate(180deg);
    }

    10% {
        top: 58%;
        left: 21%;
        transform: rotate(360deg);
    }

    15% {
        top: 59%;
        left: 22%;
        transform: rotate(540deg);
    }

    20% {
        top: 61%;
        left: 23%;
        transform: rotate(720deg);
    }

    25% {
        top: 63%;
        left: 26%;
        transform: rotate(900deg);
    }

    30% {
        top: 65%;
        left: 30%;
        transform: rotate(1080deg);
    }

    35% {
        top: 67%;
        left: 34%;
        transform: rotate(1260deg);
    }

    40% {
        top: 69%;
        left: 38%;
        transform: rotate(1440deg);
    }

    45% {
        top: 71%;
        left: 41%;
        transform: rotate(1620deg);
    }

    50% {
        top: 69%;
        left: 45%;
        transform: rotate(3600deg);
    }

    55% {
        top: 67%;
        left: 50%;
        transform: rotate(1980deg);
    }

    60% {
        top: 65%;
        left: 54%;
        transform: rotate(2160deg);
    }

    65% {
        top: 63%;
        left: 58%;
        transform: rotate(2340deg);
    }

    70% {
        top: 64%;
        left: 62%;
        transform: rotate(2520deg);
    }

    75% {
        top: 66%;
        left: 63%;
        transform: rotate(5400deg);
    }

    80% {
        top: 67%;
        left: 64%;
        transform: rotate(2880deg);
    }

    85% {
        top: 68%;
        left: 63%;
        transform: rotate(3060deg);
    }

    90% {
        top: 69%;
        left: 61%;
        transform: rotate(3240deg);
    }

    95% {
        top: 70%;
        left: 58%;
        transform: rotate(1620deg);
    }

    100% {
        top: 71%;
        left: 55%;
    }
}

@keyframes dice3 {
    0% {
        top: 56%;
        left: 20%;
    }

    10% {
        top: 60%;
        left: 24%;
        transform: rotate(360deg);
    }

    20% {
        top: 64%;
        left: 28%;
        transform: rotate(720deg);
    }

    30% {
        top: 78%;
        left: 30%;
        transform: rotate(1080deg);
    }

    40% {
        top: 72%;
        left: 35%;
        transform: rotate(1440deg);
    }

    50% {
        top: 66%;
        left: 38%;
        transform: rotate(3600deg);
    }

    60% {
        top: 62%;
        left: 40%;
        transform: rotate(2160deg);
    }

    70% {
        top: 60%;
        left: 42%;
        transform: rotate(2520deg);
    }

    80% {
        top: 64%;
        left: 40%;
        transform: rotate(2880deg);
    }

    90% {
        top: 68%;
        left: 38%;
        transform: rotate(3240deg);
    }

    100% {
        top: 72%;
        left: 35%;
    }
}

@keyframes dice4 {
    0% {
        top: 58%;
        left: 20%;
    }

    5% {
        top: 60%;
        left: 30%;
        transform: rotate(180deg);
    }

    10% {
        top: 62%;
        left: 39%;
        transform: rotate(360deg);
    }

    15% {
        top: 64%;
        left: 44%;
        transform: rotate(540deg);
    }

    20% {
        top: 66%;
        left: 48%;
        transform: rotate(720deg);
    }

    25% {
        top: 68%;
        left: 42%;
        transform: rotate(900deg);
    }

    30% {
        top: 72%;
        left: 36%;
        transform: rotate(1080deg);
    }

    35% {
        top: 74%;
        left: 28%;
        transform: rotate(1260deg);
    }

    40% {
        top: 76%;
        left: 20%;
        transform: rotate(1440deg);
    }

    45% {
        top: 78%;
        left: 25%;
        transform: rotate(1620deg);
    }

    50% {
        top: 74%;
        left: 30%;
        transform: rotate(3600deg);
    }

    55% {
        top: 72%;
        left: 35%;
        transform: rotate(1980deg);
    }

    60% {
        top: 70%;
        left: 40%;
        transform: rotate(2160deg);
    }

    65% {
        top: 68%;
        left: 58%;
        transform: rotate(2340deg);
    }

    70% {
        top: 66%;
        left: 56%;
        transform: rotate(2520deg);
    }

    75% {
        top: 70%;
        left: 61%;
        transform: rotate(5400deg);
    }

    80% {
        top: 72%;
        left: 65%;
        transform: rotate(2880deg);
    }

    85% {
        top: 74%;
        left: 62%;
        transform: rotate(3060deg);
    }

    90% {
        top: 76%;
        left: 59%;
        transform: rotate(3240deg);
    }

    95% {
        top: 76%;
        left: 54%;
        transform: rotate(1620deg);
    }

    100% {
        top: 78%;
        left: 47%;
    }
}

@keyframes dice5 {
    0% {
        top: 65%;
        left: 20%;
    }

    10% {
        top: 67%;
        left: 40%;
        transform: rotate(360deg);
    }

    20% {
        top: 69%;
        left: 60%;
        transform: rotate(720deg);
    }

    30% {
        top: 73%;
        left: 52%;
        transform: rotate(1080deg);
    }

    40% {
        top: 77%;
        left: 36%;
        transform: rotate(1440deg);
    }

    50% {
        top: 73%;
        left: 24%;
        transform: rotate(3600deg);
    }

    60% {
        top: 71%;
        left: 33%;
        transform: rotate(2160deg);
    }

    70% {
        top: 68%;
        left: 52%;
        transform: rotate(2520deg);
    }

    80% {
        top: 72%;
        left: 60%;
        transform: rotate(2880deg);
    }

    90% {
        top: 74%;
        left: 64%;
        transform: rotate(3240deg);
    }

    100% {
        top: 77%;
        left: 60%;
    }
}

@keyframes dice6 {
    0% {
        top: 66%;
        left: 20%;
    }

    10% {
        top: 68%;
        left: 26%;
        transform: rotate(360deg);
    }

    20% {
        top: 70%;
        left: 31%;
        transform: rotate(720deg);
    }

    30% {
        top: 74%;
        left: 37%;
        transform: rotate(1080deg);
    }

    40% {
        top: 78%;
        left: 42%;
        transform: rotate(1440deg);
    }

    50% {
        top: 74%;
        left: 46%;
        transform: rotate(3600deg);
    }

    60% {
        top: 71%;
        left: 51%;
        transform: rotate(2160deg);
    }

    70% {
        top: 58%;
        left: 46%;
        transform: rotate(2520deg);
    }

    80% {
        top: 71%;
        left: 42%;
        transform: rotate(2880deg);
    }

    90% {
        top: 76%;
        left: 37%;
        transform: rotate(3240deg);
    }

    100% {
        top: 78%;
        left: 32%;
    }
}